<template>
  <PagePanel header="饼图示例">
    <VisualDarkChart
      class="h-full"
      :loading="chartState.loading"
      :no-data="chartState.noData"
      :options="chartState.options"
    />
  </PagePanel>
</template>

<script lang="ts" setup>
import { PagePanel, VisualDarkChart } from '../components/index'

const chartState = reactive({
  loading: true,
  noData: false,
  options: {
    legend: {
      type: 'scroll',
      bottom: 0,
    },
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '60%',
        center: ['50%', '50%'],
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
      },
    ],
  },
})

setTimeout(() => {
  chartState.loading = false
  chartState.noData = false
}, 1000)
</script>
